<template>
   <div class="btn_op">

    <button v-if="status==1" @click="changeTask(id, status+1, getTaskList, getAllCount)" type="button" class="btn btn-primary btn-sm">Start</button>
    <button v-if="status==2" @click="changeTask(id, status+1, getTaskList, getAllCount)" type="button" class="btn btn-primary btn-sm">complete</button>
    <button @click="removeTask(id, getTaskList, getAllCount)" type="button" class="btn btn-secondary btn-sm">Remove</button>
   </div>
</template>

<script setup lang="js">
import {defineProps} from "vue";
import { post} from '../plugin/api';


defineProps({
  id: {type: Number},
  status: {type: Number},
  getTaskList: { type: Function},
  getAllCount: { type: Function},
})

const changeTask = async (id, status, taskCallback, countCallback) => {
  try{
    const baseUrl = "http://175.24.81.97:8093";
    const data = await post(`${baseUrl}/todo/change`, {id, status});
    taskCallback();
    countCallback();
  }catch (err){
    console.log(err);
  }
}

const removeTask = async (id, taskCallback, countCallback) => {
  try{
    const baseUrl = "http://175.24.81.97:8093";
    const data = await post(`${baseUrl}/todo/remove`, {id});
    taskCallback();
    countCallback();
  }catch (err){
    console.log(err);
  }
}


</script>
